<template>
    <div>
        <DanceMain :videoList="videoList" @getList="getList"></DanceMain>

    </div>
</template>

<script setup lang="ts">
import DanceMain from "@/components/DanceMain/index.vue";
import { useRouter, useRoute } from "vue-router"
import { reactive, ref, onMounted, watch } from 'vue'
import useRecommendStore from "@/stores/recommend";
const recommendStore = useRecommendStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const videoList = ref([]);
const nowPath = ref("");
// 发请求拿数据
const getList = async () => {
 
    
    if (route.path == "/index/recommend") {
        try {
            await recommendStore.getRecommendVideoList();
            videoList.value = recommendStore.recommend.videoList;
            console.log("视频列表内容", videoList.value);

        } catch (error) {

        }
    } else if (route.path == "/index/information") {
        try {
            await recommendStore.getInformationVideoList();
            videoList.value = recommendStore.information.videoList;
            // console.log("视频列表内容",videoList.value,recommendStore.information.column);

        } catch (error) {
        }
    }else if (route.name == "Dance") {
        let id = route.params.id;       
        try {
            await recommendStore.getDanceVideoList(id);
            videoList.value = recommendStore.dance.videoList;
            // console.log("视频列表内容",videoList.value,recommendStore.information.column);

        } catch (error) {
            router.push('/404')
        }
    }

}


// 监听路径变化，只要路径发生变化，仓库中所有视频数据都要清空,重新获取新数据
watch(() => route.path, () => {
    // console.log(route.path);
    recommendStore.clearData();
    getList();
})

onMounted(() => {
    getList();

})

</script>

<style scoped>

</style>